<template>
  <div style="display: flex; justify-content: space-evenly">
    <el-card class="box-card" style="width: 46%">
      <div slot="header" class="clearfix">
        <span style="font-size: 20px; color: #67c23a">用户信息</span>
        <el-button style="float: right; padding: 3px 0; font-size: 20px" type="text"
          @click="toogleForm">编辑个人信息</el-button>
      </div>
      <div style="font-size: 20px">
        <div class="demo-type">
          <el-avatar :size="180">
            <el-upload
              class="avatar-uploader"
              :show-file-list="false"
              :auto-upload="false"
              :on-change="handleChange"
              :on-success="handleAvatarSuccess"
              :before-upload="beforeAvatarUpload">
              <div class="uploader-content">
                <img v-if="imageSrc" :src="imageSrc" class="avatar">
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
              </div>
              
            </el-upload>
          </el-avatar>
        </div>
        <div class="username information el-icon-user-solid">
          &ensp;&ensp;用户名：{{ username }}
        </div>
        <br />
        <div class="phone information el-icon-phone">
          &ensp;&ensp;手机号：{{ phone }}
        </div>
        <br />
        <div class="email information el-icon-s-promotion">
          &ensp;&ensp;邮&ensp;&ensp;箱：{{ email }}
        </div>
        <br />
        <div class="department information el-icon-s-home">
          &ensp;&ensp;部&ensp;&ensp;门：{{ department }}
        </div>
        <br />
        <div class="position information el-icon-s-custom">
          &ensp;&ensp;职&ensp;&ensp;位：{{ position }}
        </div>
        <br />
        <div class="gender information el-icon-male">
          &ensp;&ensp;性&ensp;&ensp;别：{{ gender }}
        </div>
      </div>
    </el-card>
    <el-form v-if="showForm" ref="form" :model="form" label-width="80px" style="width: 46%; padding-top: 50px">
      <el-form-item label="用户名">
        <el-input v-model="form.username"></el-input>
      </el-form-item>
      <el-form-item label="手机号">
        <el-input v-model="form.phone"></el-input>
      </el-form-item>
      <el-form-item label="邮箱">
        <el-input v-model="form.email"></el-input>
      </el-form-item>
      <el-form-item label="部门">
        <el-select v-model="form.region" placeholder="请选择部门">
          <el-option label="销售部" value="销售部"></el-option>
          <el-option label="采购部" value="采购部"></el-option>
          <el-option label="财务部" value="财务部"></el-option>
          <el-option label="人事部" value="人事部"></el-option>
          <el-option label="研发部" value="研发部"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="职位">
        <el-input v-model="form.position"></el-input>
      </el-form-item>
      <el-form-item label="性别">
        <el-radio-group v-model="form.gender">
          <el-radio label="男" value="男"></el-radio>
          <el-radio label="女" value="女"></el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">立即修改</el-button>
        <el-button @click="cancle">取消</el-button>
        <el-button type="primary" @click="updatePassword">修改密码</el-button>
      </el-form-item>
      <el-form v-if="showForm2" ref="form2" :model="form2">
        <el-form-item label="旧密码">
          <el-input v-model="form2.oldPassword"></el-input>
        </el-form-item>
        <el-form-item label="新密码">
          <el-input v-model="form2.newPassword"></el-input>
        </el-form-item>
        <el-form-item label="确认新密码">
          <el-input v-model="form2.confirmPassword"></el-input>
        </el-form-item>
        <el-form-item>
        <el-button type="primary" @click="onSubmit2">立即修改</el-button>
        <el-button @click="cancle2">取消</el-button>
      </el-form-item>
      </el-form>
    </el-form>
  </div>
</template>

<script>
import { upload } from '../../utils/upload'
import { getAvatar,getUsers,updateUser,updatePwd } from "../../api/contract";


export default {
  data() {
    return {
      imageSrc: "",
      username: "帅帅的乔锦辉",
      phone: "18235823692",
      email: "admin@qingyun.com",
      department: "销售部",
      position: "销售部经理",
      gender: "男",
      labelPosition: "top",
      formLabelAlign: {
        name: "",
        region: "",
        type: "",
      },
      form: {
        userid:"",
        username: "",
        phone: "",
        email: "",
        position: "",
        gender: "",
        desc: "",
      },
      form2: {
        oldPassword: "",
        newPassword: "",
        confirmPassword: "",
      },
      showForm2: false,
      showForm: false,
    };
  },
  methods: {
    onSubmit() {
      console.log("submit!");
    },
    toogleForm() {
      this.showForm = !this.showForm;
    },
    cancle() {
      this.showForm = false;
    },
    updatePassword() {
      this.showForm2 = !this.showForm2;
    },
    cancle2() {
      this.showForm2 = false;
    },
    //上传头像
    handleChange(file){
      console.log(file.raw)
      upload(file.raw).then(res => {
        this.getAvatar()
        console.log(res)
      })
  
    },
    //获取头像
    getAvatar(){
      getAvatar().then(res => {
        console.log(res.message)
        this.imageSrc = res.message
      })
    },
    //获取用户信息
    getUsers(){
      getUsers().then(res => {
        console.log(res)
        this.username = res.result.username
        this.phone = res.result.phone
        this.department = res.result.department
        this.position = res.result.position
        this.gender = res.result.gender
        this.form.userid = res.result.userid
      })
    },
    //修改信息
    onSubmit(){
       console.log(this.form)
       updateUser(this.form).then(res => {
        console.log(res)
         if(res.code == 200){
           alert("修改成功")
         }else{
           alert("修改失败")
         }
       })
    },
    //修改密码
    onSubmit2(){
      console.log("前台获取",this.form2)
      if(this.form2.newPassword == this.form2.confirmPassword){
        let data = {
          password:this.form2.newPassword,
          lowPassword: this.form2.oldPassword
       }
       console.log("后端传",data)
       updatePwd(data).then(res => {
         if(res.code == 200){
            console.log(res)
            alert("修改成功")
         }else{
           alert("修改失败")
         }
       })
      }
      
    }
  },
  mounted() {
    this.getAvatar();
    this.getUsers();
  },
};
</script>

<style>
.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both;
}

.demo-type {
  margin-bottom: 20px;
}

.information {
  width: 80%;
  height: 40px;
  line-height: 40px;
  padding-left: 20px;
  margin-bottom: 20px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}
.avatar{
  width: 100%;
  height: 100%;
  display: block;
  margin: 0 auto;
}
.uploader-content{
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
}
</style>
